<template>
	<div style="height: 55rem;">
		<div style="position: relative">
			<img src="@/assets/images/beijingtu1.png" style="width: 100%;height: 20rem;" alt="">
		</div>
		<div style="width: 90%;height:40rem ; border: 3px solid #4E4E4E;margin-bottom: 5rem;
	    border-radius: 30px; position: absolute;top: 14rem;left: 5%;background-color: #fff;">
			<div style="font-size: 24px;text-align: center;margin-top: 2rem;font-weight: bold;">
				注册
			</div>
			<van-cell-group style="width: 80%;height: 3rem; margin: 0 auto;margin-top: 1rem;">
				<van-field label="用户" v-model="regForm.name" type="text" placeholder="请输入用户"
				  :rules="[{ pattern:regNamePwd,required: true, message: '用户名错误'}]" />
			</van-cell-group>
			<van-cell-group style="width: 80%;height: 3rem; margin: 0 auto;margin-top: 1rem;">
				<van-field label="密码" v-model="regForm.password" type="password" placeholder="请输入密码"
				  :rules="[{ pattern:regNamePwd,required: true, message: '密码错误' }]" />
			</van-cell-group>
			<van-cell-group style="width: 80%;height: 3rem; margin: 0 auto;margin-top: 1rem;">
				<van-field label="确认" v-model="regForm.password2" type="password" placeholder="请确认密码"
				  :rules="[{ pattern:regNamePwd,required: true, message: '密码错误' }]" />
			</van-cell-group>
			<van-cell-group style="width: 80%;height: 3rem; margin: 0 auto;margin-top: 1rem;">
				<van-field label="电话" v-model="regForm.phone" type="tel" placeholder="请输入电话"
				  :rules="[{ pattern:regPhone, message: '无效手机号码' }]" />
			</van-cell-group>
			<van-cell-group style="width: 80%;height: 3rem; margin: 0 auto;margin-top: 1rem;">
				<van-field name="radio" label="性别">
				  <template #input>
				    <van-radio-group v-model="regForm.gender" direction="horizontal">
				      <van-radio :name="1" checked-color="#06cb62">男</van-radio>
				      <van-radio :name="0" checked-color="#06cb62">女</van-radio>
				    </van-radio-group>
				  </template>
				</van-field>
			</van-cell-group>
			<van-cell-group style="width: 80%;height: 3rem; margin: 0 auto;margin-top: 1rem;">
				<van-field name="uploader" label="头像">
				  <template #input>
				    <van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead" />
				  </template>
				</van-field>
			</van-cell-group>
			<div style="margin-top: 5rem;text-align: center;">
				<button
					style="width: 80%;height: 3rem;background-color: #e1aab8;border-radius: 30px;border-color: #4E4E4E;font-weight: bold;font-size: 20px;color: #fff;"
					@click="onSubmit">提交</button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		registerAPI,
		uploadAvatarAPI
	} from "@/api/user.js";
	import {
		setUserLocal
	} from '@/utils/auth'
	export default {
		data() {
			return {
				regForm: { //表单中的字段名与数据库中用户表的字段名要求一致
					name: "",
					password: "",
					password2: "",
					phone: "",
					gender: 1,
					avatar: "",
				},
				avatarList: [],
				//规则:字母数字‘6~12        
				regNamePwd: /^[a-z0-9]{3,12}$/i,
				regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
			};
		},
		methods: {
			//手动处理文件上传
			afterRead(file, detail) {
				file.status = 'uploading';
				file.message = '上传中...';
				uploadAvatarAPI(file, detail).then(result => {
					file.status = '';
					file.message = '';
					//重新生成显示的图片url
					this.avatarList = [];
					this.avatarList.push({
						url: this.APIDomainName + result.url
					})
					//设置用户表中的字段值
					this.regForm.avatar = result.url;
				});
			},
			//处理提交保存
			onSubmit() {
				if (this.regForm.password != this.regForm.password2) {
					this.$toast("密码两次输入不一致");
					return;
				}
				//注意传递过去的参数user的属性名
				let user = this.regForm;
				delete user.password2; //删除该临时的字段
				registerAPI(user).then(result => {
					setUserLocal(result.data.user);
					this.$router.push({
						name: "login"
					});
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.van-field {
	  border-radius: 10px;
	  background-color: #f0f0f0;
	  font-size: 18px;
	  // font-weight: bold;
	}
</style>
